<script setup lang="ts">
import type { AvatarElement, BaseElement } from '@/types/template/common'
import BaseInfo from './view/baseInfo.vue'
import UpdPass from './view/updPass.vue'
import { useTemplateRef } from 'vue'
import { useAppsStore } from '@/stores/modules/app'
import { storeToRefs } from 'pinia'
defineOptions({
  name: 'PersonalCenter',
})
const UpdAvatar = defineAsyncComponent(() => import('./components/UpdAvatar.vue'))
const appStore = useAppsStore()
const { getUserInfo: userInfo } = storeToRefs(appStore)
const handOpenAvatar = () => {
  document.getElementById('upload')?.click()
}
const avatarRef = useTemplateRef<AvatarElement>('avatarRef')
const fileChange = (e) => {
  const file = e.target.files[0]
  avatarRef.value?.open(file)
}

const baseRef = useTemplateRef<BaseElement>('baseRef')
const avatarChange = async (e) => {
  baseRef.value?.updAvatar(e.url)
}
</script>
<template>
  <div class="personal-center flex">
    <input
      style="display: none"
      type="file"
      id="upload"
      accept="image/png, image/jpeg"
      required
      @change="fileChange"
    />
    <div>
      <div class="user-card y-card cursor-pointer" @click="handOpenAvatar">
        <n-avatar :src="userInfo.avatar" round :size="120" />
        <div class="name">{{ userInfo.nickname }}</div>
      </div>
    </div>
    <div class="right">
      <div class="setting y-card">
        <NTabs default-value="base" size="large" animated>
          <NTabPane name="base" tab="基础信息">
            <base-info ref="baseRef" />
          </NTabPane>
          <NTabPane name="safety" tab="安全信息">
            <upd-pass />
          </NTabPane>
        </NTabs>
      </div>
    </div>
    <upd-avatar ref="avatarRef" @success="avatarChange" />
  </div>
</template>

<style scoped lang="scss">
.personal-center {
  padding: 20px;
  .user-card {
    padding: 20px;
    width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .name {
      margin-top: 10px;
      color: #333;
      font-size: 20px;
      font-weight: bold;
    }
    .desc {
      font-size: 15px;
      margin-top: 10rpx;
      color: gray;
    }
  }
  .right {
    margin-left: 20px;
    flex: 1;
    .setting {
      padding: 0 20px;
    }
  }
}
</style>
